<template>
	<view>
		<view class="content">
			<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
			<view class="top">
				<view class="titleBox">
					<view class="title">
						我的作品
					</view>
					<!-- <view class="del">
						<u-icon name="trash-fill"></u-icon>
						删除记录
					</view> -->
				</view>
				<view class="text" style="margin-bottom: 20rpx;">
					1.下拉刷新可查看作品状态、
				</view>
				<view class="text" style="margin-bottom: 20rpx;">
					2.生成的作品只保留7天，请尽快保存
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" @click="goto(item)">
					<!-- <video style="width: 100%;height: 100%;" src="item.download_url"></video> -->
					<view class="heng" v-if="item.types==2" style="border-radius: 15rpx;width: 100%;height: 100%;">
						<image :src="item.cover_url" style="width: 100%;height: 100%;border-radius: 15rpx;"></image>
						<view class="btn">
							前往下载
						</view>
					</view>
					<view class="shu" v-if="item.types==1"
						style="border-radius:15rpx;width: 100%;height: 100%;display: flex;position: relative;overflow: hidden;">
						<image :src="item.cover_url"
							style="width: 100%;height:100%;border-radius: 15rpx;filter: blur(25rpx);">
						</image>
						<image class="img1" :src="item.cover_url" mode=""
							style="width:100%;height: 173rpx;z-index: 100;position: absolute;top: 50%;transform: translateY(-50%);">
						</image>
						<view class="btn">
							前往下载
						</view>
					</view>
					<view class="name">
						<view class="text">
							{{item.pro_name}}
						</view>
					</view>
					<view class="status">
						<view class="text">
							<view class="yuan"></view>制作成功
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="20"
				margin-bottom="10" />
			<!-- <view class="">
				
			</view> -->
			<u-empty v-if="isEmpty" color="#A897D9" text="暂无数据"
				src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>
		</view>
		<view @click="toTop" v-if="scrollTop>60">
			<xuanfu></xuanfu>
		</view>
	</view>
</template>

<script>
	import xuanfu from '@/components/xuanfu.vue'
	export default {
		components: {
			xuanfu
		},
		data() {
			return {
				page: 1,
				size: 10,
				isEmpty: false,
				status: "loadmore",
				total: 0,
				list: [],
				recordId: '',
				scrollTop: 0
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.getList()
		},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			toTop() {
				if (this.scrollTop > 60) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			goto(item) {
				uni.navigateTo({
					url: '/pages/sys/video_bags/video_download?id=' + item.id
				})
			},
			delList() {
				this.$u.api.video.makeInfoDel({
					recordId: ''
				}).then(res => {

				})
			},
			getList() {
				this.$u.api.video.makeList({
					page: this.page,
					size: this.size
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					// 推荐列表总数
					this.total = res.data.total;

					// 页数大于1则追加
					if (this.page > 1) {
						this.list.push(...res.data.list);
					} else {
						this.list = res.data.list
					}

					if (this.size > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}

					if (this.list.length == 0) {
						this.isEmpty = true;
					}
				})
				uni.stopPullDownRefresh()
			},
			onReachBottom() {
				let allTotal = this.page * this.size;

				if (allTotal < this.total) {
					//当前条数小于总条数 则增加请求页数
					//加载中状态
					this.status = "loading";
					this.page++;

					this.getList();
				} else {
					//加载完状态
					this.status = "noMore";
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.top {
		color: #FFFFFF;
		margin-top: 40rpx;
	}

	.titleBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	.list {
		width: 100%;
		// height: 440rpx;
		display: flex;
		align-items: center;
		// justify-content: start;
		flex-wrap: wrap;

		.item {
			width: 46%;
			height: 440rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-top: 40rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.btn {
			background: url('https://tb.wuyouzhuan888.com/applet-icon/205d3840e6440de73b167c2618bddbd6.png');
			background-size: 100% 100%;
			width: 50%;
			position: absolute;
			bottom: 22rpx;
			height: 38rpx;
			line-height: 38rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 15rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.name {
		position: absolute;
		top: 20rpx;
		left: 0;
		// width: 10rpx;
		// width: 175rpx;
		height: 44rpx;
		background-color: rgba(0, 0, 0, 0.45);
		border-radius: 0 30rpx 30rpx 0;
		padding: 0 15rpx;

		.text {
			// font-size: ;
			color: #FFFFFF;
			// margin: 10rpx 25rpx;
			line-height: 44rpx;
			text-align: center;
			font-family: PingFang HK-Light;
		}
	}

	.status {
		position: absolute;
		top: 80rpx;
		left: 0;
		// width: 10rpx;
		// width: 175rpx;
		height: 44rpx;
		background-color: rgba(0, 0, 0, 0.45);
		border-radius: 0 30rpx 30rpx 0;
		padding: 0 15rpx;

		.text {
			// font-size: ;
			color: #FFFFFF;
			// margin: 10rpx 25rpx;
			line-height: 44rpx;
			// text-align: center;
			display: flex;
			align-items: center;
			font-family: PingFang HK-Light;
		}

		.yuan {
			display: block;
			border-radius: 50%;
			width: 14rpx;
			height: 14rpx;
			background-color: lawngreen;
			margin-right: 10rpx;
		}

	}
</style>